<template>
  <view class="filling" :style="{ height: isH5 ? '100vh' : '', background: isH5 ? '#fff' : '' }">
    <uni-nav-bar title="加注" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <view>
      <view class="filling_title">{{ fillingAll.name }}</view>
      <swiper class="swiper package" circular :autoplay="true" style="width:100%;height:240px;padding:0px 20rpx;">
        <swiper-item v-for="(item,index) in imge" :key="index">
          <image :src="item" mode=""></image>
        </swiper-item>
      </swiper>
      <view class="filling_time">
        <text>营业中</text>
        <text>{{ fillingAll.time }}</text>
      </view>
      <view class="filling_tel">
        <view class="" @click="NavigationLoc()">
          <text style="margin-right: 10rpx">{{ fillingAll.address }}</text>
        </view>
        <view class="" style="display: flex; align-items: center; justify-content: space-between">
          <view class="" @click="telCall(fillingAll.mobile)">
            <uni-icons type="phone" size="22" color="#2979ff" style="margin: 0px 10rpx 0px 0rpx"></uni-icons>
            <text style="color: #1b91ff">{{ fillingAll.mobile }}</text>
          </view>
          <view class="" @click="NavigationLoc()">
            <image src="../../static/filling/dao.png" mode=""
              style="width: 33rpx; height: 33rpx; margin: 0px 10rpx 0px 0px"></image>
            <text>距您{{ fillingAll.distance }}</text>
          </view>
        </view>
      </view>
      <view class="filling_text">{{ fillingAll.des }}</view>
    </view>
    <!-- 导航 -->
    <uni-popup ref="Navigation" type="bottom" style="width:100%;">
      <view class="popup">
        <view class="" @click="daohang('bai')">百度地图</view>
        <view class="" @click="daohang('de')">高德地图</view>
        <view class="" @click="daohang('teng')">腾讯地图</view>
        <view class="" @click="() => Navigation.close()">取消</view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
  import type { Ref } from 'vue';
  import { ref } from 'vue';
  import { navBack } from '@/utils/navigator';
  import { toPublish } from '@mqtt';
  import { fillingListL } from '@/gql/filling';
  import { onLoad } from '@dcloudio/uni-app';
  import { telCall } from '@/utils/copyText';
  import { isH5 } from '@/utils/platform';
  /**
   * @component
   * @desc 加注机详情页面
   * @property {Object} fillingAll 加注机全部信息
   * @property {Array} imge 加注机图片
   * @property {Null} Navigation 导航弹框
   * @property {String} longitude 纬度
   * @property {String} latitude 经度
   * @property {String} fillID 加注机ID
   */
  const fillingAll = ref({})
  const imge : Ref<string[]> = ref([]);
  const Navigation = ref(null)
  const longitude = ref('')
  const latitude = ref('')
  const fillID = ref('')
  onLoad((pearm) => {
    longitude.value = pearm.longitude
    latitude.value = pearm.latitude
    fillID.value = pearm.id
    fillLists()
  })
  /**
   * 获取加注机详情
   */
  function fillLists() {
    uni.showLoading({
      title: '正在加载',
    });
    const payload = {
      query: fillingListL,
      variables: {
        longitude: Number(longitude.value),
        latitude: Number(latitude.value),
        id: fillID.value,
      },
    };
    toPublish('ql/driver/getFillDetail', payload, (obj : any) => {
      const { data } = obj;
      uni.hideLoading();
      fillingAll.value = data.fill;
      imge.value = data.fill.images.split(',');
    })
  }
  /**
   * 导航并打开导航弹框
   */
  function NavigationLoc() {
    Navigation.value.open()
  }
  /**
   * 导航方式
   * @property {String} type 选择导航方式
   */
  function daohang(type : string) {
    let position = {
      latitude: Number(fillingAll.value.latitude),
      longitude: Number(fillingAll.value.longitude),
    };
    let addres = fillingAll.value.address;
    switch (type) {
      //高德地图高航
      case 'de':
        window.location.href = `https://uri.amap.com/navigation?from=${longitude.value},${latitude.value},当前位置&to=${fillingAll.value.longitude
          },${fillingAll.value.latitude},${fillingAll.value.address}&mode=car&policy=1&src=${fillingAll.value.address
          }&coordinate=gaode&callnative=1`;
        break;
      //百度地图导航
      case 'bai':
        window.location.href = `http://api.map.baidu.com/direction?origin=latlng:${latitude.value},${longitude.value
          }|name:当前位置&destination=${position}|name:${addres},&mode=driving&region=henan&output=html&src=webapp.baidu.openAPIdemo`;
        break;
      //腾讯地图导航
      case 'teng':
        window.location.href = `http://apis.map.qq.com/uri/v1/routeplan?type=drive&to=${addres}&tocoord=${position}&referer=dfdfd`;
        break;
    }
  }
</script>

<style lang="less">
  @import url('../addUrea/less/filliDetail.less');

  .swiper {
    image {
      width: 100% !important;
      border-radius: 5px;
    }
  }
</style>